<template>
  <div class="page-line-wrapper">
    <div class="page-line">
      <div class="airport-line" id="airportLineMap"></div>
      <div class="line-detail">
        <div class="line-detail-header f-r a-c j-b">
          <span>基本信息</span>
          <span class="icon-box f-r a-c">
          <el-icon color="#898F9D" @click="editLine"><Edit /></el-icon>
          <div style="width: 10px"></div>
          <el-icon color="#FF5C5C" @click="deleteLine"><Delete /></el-icon>
        </span>
        </div>
        <div class="dialog-detail-box">
          <div class="f-r a-c detail-item">
            <span class="detail-label">航线名称：</span>
            <span class="detail-value">{{ lineDetail.name }}</span>
          </div>
          <div class="f-r a-c detail-item">
            <span class="detail-label">执行时间：</span>
            <span class="detail-value">{{ lineDetail.dateTime }}</span>
          </div>
          <div class="f-r a-c detail-item">
            <span class="detail-label">执行周期：</span>
            <span class="detail-value">{{ lineDetail.daterange[0] }} 至 {{ lineDetail.daterange[1] }}</span>
          </div>
          <div class="f-r a-c detail-item">
            <span class="detail-label">执行策略：</span>
            <span class="detail-value">{{ lineDetail.strategy }}</span>
          </div>
          <div class="f-r a-c detail-item">
            <span class="detail-label">机场选择：</span>
            <span class="detail-value">{{ lineDetail.airport }}</span>
          </div>
          <div class="f-r a-c detail-item">
            <span class="detail-label">飞行高度：</span>
            <span class="detail-value">{{ lineDetail.height }} 米</span>
          </div>
          <div class="f-r a-c detail-item">
            <span class="detail-label">飞行速度：</span>
            <span class="detail-value">{{ lineDetail.speed }} 米/秒</span>
          </div>
          <div class="f-r a-c detail-item">
            <span class="detail-label">飞行速度：</span>
            <span class="detail-value">{{ lineDetail.yaw === 1 ? '沿航线方向' : '按航点设置' }}</span>
          </div>
          <div class="f-r a-c detail-item">
            <span class="detail-label">完成动作：</span>
            <span class="detail-value">{{ lineDetail.action === 1 ? '自动返航' : '' }}</span>
          </div>
        </div>
        <div class="line-detail-header f-r a-c j-b">
          <span>飞行设置</span>
        </div>
      </div>
      <a-modal v-model:visible="dialogLine" width="420px" title="新增航线" :footer="null">
        <div class="dialog-line">
          <a-steps :current="activeLine" :initial="0">
            <a-step title="基本信息"/>
            <a-step title="全局配置" />
          </a-steps>
          <div style="padding-top: 20px" v-show="activeLine === 0">
            <el-form ref="lineDetailFormRef" label-position="top" :model="lineDetailForm" :rules="lineDetailRules">
              <el-form-item label="航线名称" prop="name">
                <el-input v-model="lineDetailForm.name" placeholder="请输入航线名称"></el-input>
              </el-form-item>
              <el-form-item label="执行周期" prop="daterange">
                <el-date-picker type="daterange" v-model="lineDetailForm.daterange"></el-date-picker>
              </el-form-item>
              <el-form-item label="执行时间" prop="dateTime">
                <el-date-picker style="width: 100%" type="datetime" v-model="lineDetailForm.dateTime"></el-date-picker>
              </el-form-item>
              <el-form-item label="执行策略" prop="strategy">
                <el-select v-model="lineDetailForm.strategy">
                  <el-option label="按天" value="day"/>
                  <el-option label="按周" value="week"/>
                  <el-option label="按月" value="month"/>
                </el-select>
              </el-form-item>
              <el-form-item label="任务说明" prop="remark">
                <el-input type="textarea" v-model="lineDetailForm.remark"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div style="padding-top: 20px" v-show="activeLine === 1">
            <el-form ref="lineDetailFormRef2" label-position="top" :model="lineDetailForm2" :rules="lineDetailRules2">
              <el-form-item label="机场选择" prop="airport">
                <el-select v-model="lineDetailForm2.airport">
                  <el-option label="按天" value="day"/>
                  <el-option label="按周" value="week"/>
                  <el-option label="按月" value="month"/>
                </el-select>
              </el-form-item>
              <el-form-item label="飞行高度" prop="height">
                <div class="f-r a-c">
                  <div style="width: 200px">
                    <a-slider v-model:value="lineDetailForm2.height" />
                  </div>
                  <a-input-number v-model:value="lineDetailForm2.height" :min="1" :max="20" style="margin-left: 16px" />
                  <span style="padding-left: 10px">米</span>
                </div>
              </el-form-item>
              <el-form-item label="飞行速度" prop="speed">
                <div class="f-r a-c">
                  <div style="width: 200px">
                    <a-slider v-model:value="lineDetailForm2.speed" />
                  </div>
                  <a-input-number v-model:value="lineDetailForm2.speed" :min="1" :max="20" style="margin-left: 16px" />
                  <span style="padding-left: 10px">米/秒</span>
                </div>
              </el-form-item>
              <el-form-item label="飞行器偏航角" prop="yaw">
                <el-radio-group v-model="lineDetailForm2.yaw">
                  <el-radio :label="1">沿航线方向</el-radio>
                  <el-radio :label="2">按航点设置</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="完成动作" prop="action">
                <el-radio-group v-model="lineDetailForm2.action">
                  <el-radio :label="1">自动返航</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div slot="footer" style="text-align: right">
          <el-button @click="dialogLine = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">{{ activeLine === 0 ? '下一步' : '新增'}}</el-button>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script setup>
import { CheckCircleOutlined } from '@ant-design/icons-vue';
import { Delete, Edit } from "@element-plus/icons-vue";
import {createVNode, onMounted, onUnmounted, ref} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {MapKey} from "@/plugins/amap";
import {Modal} from "ant-design-vue";

/**
 * 地图
 */
let map = null;
onMounted(() => {
  AMapLoader.load({
    key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
      .then((AMap) => {
        map = new AMap.Map("airportLineMap", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          layers: [new AMap.TileLayer.Satellite()],
          zoom: 14, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });
});
onUnmounted(() => {
  map?.destroy();
});


/**
 * 操作
 */
const dialogLine = ref(true);
const activeLine = ref(0)
const lineDetailForm = ref({
  name: "",
  daterange: [],
  dateTime: "",
  strategy: "",
});
const lineDetailForm2 = ref({
  // 机场
  airport: "",
  // 飞行高度
  height: 40,
  // 飞行速度
  speed: 50,
  // 飞行器偏航角
  yaw: 1,
  // 完成动作
  action: 1,
});

const lineDetailRules = ref({
  name: [
    {required: true, message: "请输入航线名称", trigger: "blur"},
  ],
  daterange: [
    {required: true, message: "请选择执行周期", trigger: "blur"},
  ],
  dateTime: [
    {required: true, message: "请选择执行时间", trigger: "blur"},
  ],
  strategy: [
    {required: true, message: "请选择执行策略", trigger: "blur"},
  ],
  remark: [
    {required: true, message: "请输入任务说明", trigger: "blur"},
  ],
});
const lineDetailRules2 = ref({
  airport: [
    {required: true, message: "请选择机场", trigger: "blur"},
  ],
  height: [
    {required: true, message: "请选择飞行高度", trigger: "blur"},
  ],
  speed: [
    {required: true, message: "请选择飞行速度", trigger: "blur"},
  ],
  yaw: [
    {required: true, message: "请选择飞行器偏航角", trigger: "blur"},
  ],
  action: [
    {required: true, message: "请选择完成动作", trigger: "blur"},
  ],
});
const lineDetailFormRef = ref(null);
const lineDetailFormRef2 = ref(null);

/**
 * 当前航线信息
 */
const lineDetail = ref({
  name: "航线1",
  daterange: ["2021-09-01", "2021-09-30"],
  dateTime: "2021-09-01 08:00:00",
  strategy: "day",
  remark: "航线1的任务说明",
  airport: "机场1",
  height: 40,
  speed: 50,
  yaw: 1,
  action: 1,
});
const handleConfirm = () => {
  if (activeLine.value === 0) {
    lineDetailFormRef.value.validate((valid) => {
      if (valid) {
        activeLine.value = 1;
      }
    });
  } else {
    lineDetailFormRef2.value.validate((valid) => {
      if (valid) {
        dialogLine.value = false;
        Modal.confirm({
          centered: true,
          title: '航线创建成功',
          icon: createVNode(CheckCircleOutlined),
          content: '新增航线成功，请在地图上添加航点完成绘制',
          okText: '去添加',
          cancelText: '取消',
          ok: () => {
            lineDetail.value = {
              name: "航线1",
              daterange: ["2021-09-01", "2021-09-30"],
              dateTime: "2021-09-01 08:00:00",
              strategy: "day",
              remark: "航线1的任务说明",
              airport: "机场1",
              height: 40,
              speed: 50,
              yaw: 1,
              action: 1,
            }
          }
        });
      }
    });
  }
}

// 删除航线
const deleteLine = () => {
  Modal.confirm({
    title: '删除航线',
    content: '确定删除当前航线吗？',
    okText: '确定',
    cancelText: '取消',
    onOk: () => {
      Modal.success({
        title: '删除成功',
        content: '当前航线已删除',
        okText: '确定',
      });
    }
  });
}

const editLine = () => {
  dialogLine.value = true;
  for (const lineDetailFormKey in lineDetailForm.value) {
    lineDetailForm.value[lineDetailFormKey] = lineDetail.value[lineDetailFormKey];
  }
  for (const lineDetailForm2Key in lineDetailForm2.value) {
    lineDetailForm2.value[lineDetailForm2Key] = lineDetail.value[lineDetailForm2Key];
  }
}


</script>
<style scoped lang="scss">
.page-line-wrapper {
  padding: 16px;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}
.page-line {
  height: 100%;
  overflow: hidden;
  position: relative;
  .line-detail {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    .line-detail-header {
      padding: 20px;
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 500;
      line-height: 19.6px;
      text-align: left;
      color: #1C2435;
    }
    .dialog-detail-box {
      padding:0 16px 0;
      .detail-item {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        line-height: 36px;
        .detail-label {
          color: #898F9D;
        }
        .detail-value {
          color: #1C2435;
          margin-left: 8px;
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 19.6px;
          height: 20px;

          &.error::before {
            background-color: #FF4D4F;
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 4px;
          }
          &.normal::before {
            background-color: #48E07C;
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 4px;
          }
        }
      }
    }
  }
  .airport-line {
    height: 100%;
  }
}
</style>